<template>
    <div>
        <Card dis-hover :bordered="false">
            <!-- <Row :gutter="10">
                <Col span="6" style="z-index: 99;">
                <departList
                    :key="keys"
                    @changeList="changeList"
                    @changeId="changeId"
                    @changePId="changePId"
                />
                </Col>
                <Col span="18">
                <table-list
                    ref="userList"
                    :department_id="department_id"
                    :pid="pid"
                    :departmentLists="departmentList"
                    @changeKeys="changeKeys"
                />
            </Col>
            </Row> -->
            <div style="display: flex;">
                <div class="list-left">
                    <departList
                        :key="keys"
                        @changeList="changeList"
                        @changeId="changeId"
                        @changePId="changePId"
                    />
                </div>
                <div class="list-right">
                    <table-list
                        ref="userList"
                        :department_id="department_id"
                        :pid="pid"
                        :departmentLists="departmentList"
                        @changeKeys="changeKeys"
                    />
                </div>
            </div>
        </Card>
    </div>
</template>
<script>
import tableList from './table-list';
import departList from './depart-list';
export default {
  components: { tableList, departList },
  data() {
    return {
      department_id: '',
      pid: '',
      departmentList: [],
      keys: 1,
    };
  },
  methods: {
    changeId(value) {
      this.department_id = value;
    },
    changePId(value) {
      this.pid = value;
    },
    changeKeys(value) {
      this.keys = this.keys + 1;
    },
    changeList(value) {
      this.departmentList = value;
    },
  },
};
</script>
<style>
.demo-tree-render .ivu-tree-title {
  width: 100%;
}
.list-left{
    width: 370px;
    min-width:370px;
    z-index: 99;
}
.list-right{
    /* flex: 1; */
    width: calc(100% - 370px);
}
</style>
